出处|更多_Flutter微信项目实战01基本框架搭建

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Flutter微信项目实战01基本框架搭建相关的知识，希望对你有一定的参考价值。

1. 写在前面

在上篇文章中介绍了Flutter中的Button组件&＃xff0c;学了这么多基础组件了&＃xff0c;该是实战验证一下学习成果了&＃xff0c;那么今天就来个实战项目&＃xff0c;搭建一下微信的框架吧&＃xff01;

• [基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

【Flutter】基础组件【04】Row/Column

【Flutter】基础组件【05】Icon

【Flutter】基础组件【06】Image

【Flutter】基础组件【07】Appbar

【Flutter】基础组件【08】BottomNavigationBar

【Flutter】基础组件【09】Button

2. 新建项目

• 新建项目

选择File -> New -> New Flutter Project新建一个 flutter 项目

• 选择 Flutter App

• 设置项目名称为flutter_wechat

3. main.dart

3.1 main函数

void main()
runApp(const MyApp());

class MyApp extends StatelessWidget
const MyApp(Key? key) : super(key: key);
// This widget is the root of your application.
&＃64;override
Widget build(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: true,//去掉 debug 标记
theme:ThemeData(
primarySwatch: Colors.blue,//导航栏颜色
),
home: RootPage(),
);




• home: 相当于 OC 中的 UITabBarController&＃xff0c;这是 APP 的骨架
• debugShowCheckedModeBanner&＃xff1a;去掉 debug的标记&＃xff0c;设置 false就不展示
• theme:主题的设置

3.2 创建根视图

• 根视图RootPage设置&＃xff0c;

先来创建一个文件root_page.dart&＃xff0c;设置 tabbar

• 新建 dart 文件

3.3 设置BottomNavigationBar

• bottomNavigationBar

在Scaffold组件里面有个属性bottomNavigationBar&＃xff0c;这个就是相当于我们 OC 中的 tabbar&＃xff0c;它是继承自StatefulWidget。通过BottomNavigationBar的items来设置 4 个页面&＃xff0c;用BottomNavigationBarItem来构造。

bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
fixedColor: Colors.green,
type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: &＃39;微信&＃39;),
BottomNavigationBarItem(
icon: Icon(Icons.bookmark),
label: &＃39;通讯录&＃39;),
BottomNavigationBarItem(
icon: Icon(Icons.history),
label: &＃39;发现&＃39;),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline),
label: &＃39;我&＃39;),
],
)


3.4 BottomNavigationBar

BottomNavigationBar的一些属性介绍&＃xff1a;

• type&＃xff1a;BottomNavigationBarItem的模式&＃xff0c;BottomNavigationBarType是枚举&＃xff0c;有fixed和shifting两种模式设置。
• currentIndex:当前选中的是哪个 item&＃xff0c;就是底部 4 个 item的切换选中的值&＃xff0c;可以通过点击的方法切换改值
• fixedColor&＃xff1a;填充的颜色&＃xff0c;item 的填充颜色

3.5 创建微信页面

• 微信界面

一个 BottomNavigationBarItem 对应的页面就相当于 OC 中的 UIViewController。

class ChatPage extends StatefulWidget
const ChatPage(Key? key) : super(key: key);
&＃64;override
_ChatPageState createState() &＃61;> _ChatPageState();

class _ChatPageState extends State<ChatPage>
&＃64;override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: const Text(
&＃39;微信页面&＃39;,
style: TextStyle(color: Colors.black),
),
),
body:const Center(
child: Text(&＃39;微信页面&＃39;),
),
);




• BottomNavigationBarItem的切换

BottomNavigationBarItem的切换需要实现onTap 点击方法来进行切换。

//BottomNavigationBar 的点击事件
onTap: (index)
print("index &＃61; $index");
setState(()
_currentIndex &＃61; index;
);
,


在onTap方法的回调里面&＃xff0c;可以拿到点击的 item 的值&＃xff0c;就可以设置当前需要显示的页面时哪个&＃xff0c;通过_currentIndex &＃61; index;来改变。

注意&＃xff1a;
因为涉及到状态的改变&＃xff0c;所以 Widget 必须使用带状态的StatefulWidget&＃xff0c;在回调方法里面&＃xff0c;需要使用setState来设置状态的改变。

GitHub项目地址

4. 写在后面

关注我&＃xff0c;更多内容持续输出

• CSDN
• 掘金
• 简书

&＃x1f339; 喜欢就点个赞吧&＃x1f44d;&＃x1f339;

&＃x1f339; 觉得有收获的&＃xff0c;可以来一波 收藏&＃43;关注&＃xff0c;以免你下次找不到我&＃x1f601;&＃x1f339;

&＃x1f339;欢迎大家留言交流&＃xff0c;批评指正&＃xff0c;转发请注明出处&＃xff0c;谢谢支持&＃xff01;&＃x1f339;